﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
<style>
#regform{
    border:1px solid #999;
    width:300px;
    height:600px;
    margin:0 auto;
}
</style>
</head>
<body>
<script src ="jquery.js"></script>
<form id="regform">
    <input type="hidden" name="countryNo" value="86"/>
    <input placeholder ="手机号" id="phone" name="phone" autocomplete="off"/>
    <span id="phoneerror"></span>
    <br /><br />
    <input placeholder="验证码" id="yzm"/>
    <span id="yzmerror"></span>
    <input type="button" value="发送验证码" id="yanzhengmaBtn" disabled/><br /><br />
    <input placeholder="密码" name="pwd" id="pwd1" title="密码长度6~16位，数字、字母和符号至少包含两种"/>
    <span id="pwderror1"></span>
    <br /><br />
    <input placeholder="重复密码" id="pwd2"/>
    <span id="pwderror2"></span>
    <br /><br />
    <input type="checkbox" id="agreeCK"/><a href="">注册协议</a> <br /><br />
    <input type ="button" id ="submitBtn" value="注册" disabled /><br /><br />
    <div class="deng"><a href ="登录.html">账号登录</a></div>
    
</form>
<script>
    //手机号码正则表达式
    var phoneReg =/^1[345789][0-9]{9}$/;
    //验证码正则表达式
    var codeReg = /^[0-9]{6}$/;
    var pwdReg0 = /^.{6,16}$/;
    var pwdReg1 = /[0-9]+/;
    var pwdReg2 = /[a-zA-Z]+/;
    var pwdReg3 = /[=~!@#\$%\^&\*\(\)\+\{\[\]\}:"\|',\<\?.\/\\]+/;
    var timer;
    var t=60;
    //表示是否同意注册协议
    var isAgree = false;
    var isPhoneRight = false;
    var isYZMRight = false;
    var isPwd1Right = false;
    var isPwd2Right = false;
    //功能1：向用户提示手机号码格式是否正确
    phone.onblur = function(){
        var phoneValue = phone.value;
        if(!phoneReg.test(phoneValue)){
            phoneerror.innerHTML ="手机号码格式有误！";
            isPhoneRight = false;
        }else{
            phoneerror.innerHTML = "<img src='dui.png'/>";
            isPhoneRight =true;
        }
        checkAll();
    };
    //功能2：根据手机号码格式的正确性，决定是否启用验证码按钮
    phone.onkeyup=function(){
        var phoneValue = phone.value;
        if(!phoneReg.test(phoneValue)){
            yanzhengmaBtn.setAttribute("disabled","disabled");
            yanzhengmaBtn.style.color="";
            isPhoneRight=false;
        }else{
            yanzhengmaBtn.removeAttribute("disabled");
            yanzhengmaBtn.style.color="red";
            isPhoneRight=true;
        }
        checkAll();
    };
    //功能3：发送验证码功能
    //点击后要求倒计时60秒。在此期间该按钮应该禁用
    yanzhengmaBtn.onclick=function(){
         
        yanzhengmaBtn.setAttribute("disabled","disabled");
        yanzhengmaBtn.style.color="";
        yanzhengmaBtn.value="重新发送60";
          
        timer=setInterval(daojishi,1000);
 alert("验证码是  111111");
    };

    function daojishi(){
        t--;
        if(t==0){
            clearInterval(timer);
            yanzhengmaBtn.value="发送验证码";
            yanzhengmaBtn.removeAttribute("disabled");
            yanzhengmaBtn.style.color ="red";
            t=60;
            
            return;
        }
        yanzhengmaBtn.value="重新发送"+t;
    }
    //功能4：验证验证码的正确性
    yzm.onkeyup=function(){
        var yzmValue =yzm.value;
        if(yzmValue.length==0){
            yzmerror.innerHTML="请您填写验证码！";
            isYZMRight =false;
            checkAll();
            return;
        }
        if(!codeReg.test(yzmValue)){
            yzmerror.innerHTML ="验证码格式有误！";
            isYZMRight =false;
            checkAll();
            return;
        }
        $.ajax({
            url:"http://test.hfjava.com/shop/yzm",
            dataType:"jsonp",
            success:function(data){
                if(data.code!=yzmValue){
                    yzmerror.innerHTML="验证码错误！";
                    isYZMRight =false;
                }else{
                    yzmerror.innerHTML="验证码正确！";
                    isYZMRight =true;
                }
                checkAll();
            }
        });
    };
    //功能5：密码1验证格式有效性
    pwd1.onkeyup=function(){
        var pwd1Value =pwd1.value;
        var rightCount =0;
        //长度 字母 数字 符号
        var lengthValid =pwdReg0.test(pwd1Value);
        var numberValid =pwdReg1.test(pwd1Value);
        var letterValid =pwdReg2.test(pwd1Value);
        var symbolValid =pwdReg3.test(pwd1Value);

        if(numberValid){
            rightCount++;
        }
        if(letterValid){
            rightCount++;
        }
        if(symbolValid){
            rightCount++;
        }
        if(!lengthValid||rightCount<2){
            pwderror1.innerHTML="密码格式错误";
            isPwd1Right =false;
        }else{
            pwderror1.innerHTML="密码格式正确";
            isPwd1Right =true;
        }
        checkPwd2();
        checkAll();
    };
    //功能6：密码2验证与密码1是否一致
    pwd2.onkeyup=function(){
        checkPwd2();
    };
    function checkPwd2(){
        var pwd1Value =pwd1.value;
        var pwd2Value =pwd2.value;
        if(pwd1Value!==pwd2Value){
            pwderror2.innerHTML="两次密码不一致";
            isPwd2Right=false;
        }else{
            pwderror2.innerHTML="两次密码一致";
            isPwd2Right=true;
        }
        checkAll();
    }
    //功能7：获得用户是同意注册协议
    agreeCK.onclick = function(){
        isAgree=this.checked;
        checkAll();
    };
    //功能8：检测是否可以注册
    function checkAll(){
        var isRight=isAgree&&isPhoneRight&&isYZMRight&&isPwd1Right&&isPwd2Right;

        if(isRight){
            submitBtn.removeAttribute("disabled");
            submitBtn.style.color ="red";
        }else{
            submitBtn.setAttribute("disabled","disabled");
            submitBtn.style.color ="";
        }
    }
    //功能：实现注册功能
    submitBtn.onclick =function(){
        $.post("http://test.hfjava.com/shop/adduser", $("form").serialize(),
            function(data){
                if(data=="Saved"){
                    alert("注册成功！");
                }
            }
        );
    };
</script>
</body>
</html>